import { Directive, ElementRef, HostListener, Input, Output, Renderer2, EventEmitter } from '@angular/core';

@Directive({
  selector: '[jackDrag]'
})
export class DragDirective {



  @Output()
  ondragstart = new EventEmitter<any>()

  @Output()
  ondragend = new EventEmitter<any>()

  @Input('isdraggable')
  isdraggable: string;

  constructor(
    private _elementRef:ElementRef,
    private renderer: Renderer2
  ) { }

  @HostListener('dragstart', ['$event'])
  _ondragstart(evt) {
    console.log('on drag start');
  }


  @HostListener('drag',['$event'])
  _ondrag(evt) {
    if(this.isdraggable == 'true') {
      console.log(this.isdraggable)
      this.setStyle()
    }
  }





  @HostListener('dragend', ['$event'])
  _ondragend(evt) {
    console.log('---dragend')
  }


  private setStyle() {
    this.renderer.setStyle(this._elementRef.nativeElement, 'color','red');
  }


}
